<style lang="less">
  @import "./main";
</style>
<template>
  <div id="main" class="main" :class="{'main-hide-text': hideMenuText}" style="background-color: #f0f0f0">
    <div class="sidebar-menu-con"
         :style="{width: hideMenuText?'60px':'200px', overflow: hideMenuText ? 'visible' : 'auto', background: $store.state.app.menuTheme === 'dark'?'#515a6e':'white'}">
      <div class="logo-con">
        <img class="img" v-show="!hideMenuText" src="@/assets/logo-w.png">
        <img class="img_min" v-show="hideMenuText" src="@/assets/min-logo-w.png">
      </div>
      <sidebar-menu v-if="!hideMenuText" :menuList="menuList" :iconSize="14"></sidebar-menu>
      <sidebar-menu-shrink :icon-color="menuIconColor" v-else :menuList="menuList"></sidebar-menu-shrink>
    </div>
    <div class="main-header-con" :style="{paddingLeft: hideMenuText?'60px':'200px'}">
      <div class="main-header">
        <div class="navicon-con">
          <div
            :style="{transform: 'rotateZ(' + (this.hideMenuText ? '-90' : '0') + 'deg)',lineHeight:'48px',cursor:'pointer'}"
            type="text"
            @click="toggleClick">
            <Icon type="ios-menu" size="32"></Icon>
          </div>
        </div>
        <div class="header-avator-con">
          <themeDropDownMenu></themeDropDownMenu>
          <div class="user-dropdown-menu-con">
            <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
              <Dropdown trigger="click" @on-click="handleClickUserDropdown">
                <a href="javascript:void(0)" style="color: #999999">
                  <span class="main-user-name">{{ userName }}<Icon type="ios-arrow-down"></Icon></span>
                </a>
                <DropdownMenu slot="list">
                  <DropdownItem name="ownSpace">个人中心</DropdownItem>
                  <DropdownItem name="loginout" divided>退出登录</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <Avatar :src="avatorPath"
                      style="background: #619fe7;margin-left: 10px;border-radius: 16px!important;"></Avatar>
            </Row>
          </div>
        </div>
      </div>
      <div class="tags-con" v-if="false">
        <tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
      </div>
    </div>
    <div class="single-page-con" :style="{paddingLeft: hideMenuText?'60px':'200px'}">
      <div class="single-page">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
  import sidebarMenu from './home_components/sidebarMenu.vue';
  import tagsPageOpened from './home_components/tagsPageopened.vue';
  import breadcrumbNav from './home_components/breadcrumbNav.vue';
  import themeDropDownMenu from './home_components/themeDropdownMenu.vue';
  import sidebarMenuShrink from './home_components/sidebarMenuShrink.vue';
  import util from 'util';

  export default {
    components: {
      sidebarMenu,
      tagsPageOpened,
      breadcrumbNav,
      themeDropDownMenu,
      sidebarMenuShrink
    },
    data() {
      return {
        spanLeft: 4,
        spanRight: 20,
        currentPageName: '',
        hideMenuText: false,
        userName: '',
        headAppear: '',
        showFullScreenBtn: window.navigator.userAgent.indexOf('MSIE') < 0,
        isFullScreen: false,
        messageCount: 0,
      };
    },
    computed: {
      menuList() {
        return this.$store.state.app.menuList;
      },
      tagsList() {
        return this.$store.state.app.tagsList;  // 所有页面的页面对象
      },
      pageTagsList() {
        return this.$store.state.app.pageOpenedList;  // 打开的页面的页面对象
      },
      currentPath() {
        return this.$store.state.app.currentPath;  // 当前面包屑数组
      },
      menuIconColor() {
        return this.$store.state.app.menuTheme === 'dark' ? 'white' : '#495060';
      },
      avatorPath() {
        // return this.headAppear;
        return localStorage.avatorImgPath;
      }
    },
    methods: {
      init() {
        this.userName = this.$ls.get('realName');
        this.headAppear = this.$ls.get('setAvator');
        let pathArr = util.setCurrentPath(this, this.$route.name);
        if (pathArr.length >= 2) {
          this.$store.commit('addOpenSubmenu', pathArr[1].name);
        }
        let messageCount = 3;
        this.messageCount = messageCount.toString();
        this.$store.commit('setCurrentPageName', this.$route.name);
      },
      toggleClick() {
        this.hideMenuText = !this.hideMenuText;
      },
      handleClickUserDropdown(name) {
        if (name === 'ownSpace') {
          util.openPage(this, 'ownspace_index', '个人中心');
        } else if (name === 'loginout') {
          // 退出登录
          this.$ls.remove('user');
          this.$ls.remove('password');
          this.$ls.remove('hasGreet');
          this.$ls.remove('access');
          this.$Notice.close('greeting');
          this.$store.commit('clearOpenedSubmenu');
          localStorage.clear();
          this.$router.push({
            name: 'login'
          });
          window.location.reload();
        }
      },
      showUpdate() {
        util.openPage(this, 'updateTips_index', '版本更新');
      }
    },
    mounted() {
      this.$store.commit('getWindowWidth', window.innerWidth);
      $(window).resize(() => {
        if (window.innerWidth < window.screen.width * 0.75) {
          this.hideMenuText = true
        } else {
          this.hideMenuText = false
        }
        this.$store.commit('getWindowWidth', window.innerWidth);
        if (window.innerWidth < 1440) {
          $('html body').css({
            "width": "100%"
          })
        } else {
          $('html body').css({
            "width": "100%"
          })
        }
      });
      this.init();
      // 问候信息相关
      if (!this.$ls.get('hasGreet')) {
        let now = new Date();
        let hour = now.getHours();
        let greetingWord = {
          title: '',
          words: ''
        };
        let userName = this.$ls.get('realName');
        if (hour < 6) {
          greetingWord = {title: '凌晨好~' + userName, words: '早起的鸟儿有虫吃~'};
        } else if (hour >= 6 && hour < 9) {
          greetingWord = {title: '早上好~' + userName, words: '来一杯咖啡开启美好的一天~'};
        } else if (hour >= 9 && hour < 12) {
          greetingWord = {title: '上午好~' + userName, words: '工作要加油哦~'};
        } else if (hour >= 12 && hour < 14) {
          greetingWord = {title: '中午好~' + userName, words: '注意给自己一个适当的午休~'};
        } else if (hour >= 14 && hour < 17) {
          greetingWord = {title: '下午好~' + userName, words: '下午也要活力满满~'};
        } else if (hour >= 17 && hour < 19) {
          greetingWord = {title: '傍晚好~' + userName, words: '忙碌可不要忘记身体的健康~'};
        } else if (hour >= 19 && hour < 21) {
          greetingWord = {title: '晚上好~' + userName, words: '工作之余品一品书香吧~'};
        } else {
          greetingWord = {title: '深夜好~' + userName, words: '夜深了，注意休息哦~'};
        }
        this.$Notice.config({
          top: 130
        });
        this.$Notice.info({
          title: greetingWord.title,
          desc: greetingWord.words,
          duration: 4,
          name: 'greeting'
        });
        this.$ls.set('hasGreet', 1);
      }
    },
    created() {
      // 权限菜单过滤相关
      this.$store.commit('updateMenuList');
      // 查找当前用户之前登录时设置的主题
      let name = this.$ls.get('user');
      if (localStorage.theme) {
        let hasThisUser = JSON.parse(localStorage.theme).some(item => {
          if (item.userName === name) {
            this.$store.commit('changeMenuTheme', item.menuTheme);
            this.$store.commit('changeMainTheme', item.mainTheme);
            return true;
          } else {
            return false;
          }
        });
        if (!hasThisUser) {
          this.$store.commit('changeMenuTheme', 'dark');
          this.$store.commit('changeMainTheme', 'b');
        }
      } else {
        this.$store.commit('changeMenuTheme', 'dark');
        this.$store.commit('changeMainTheme', 'b');
      }
      // 根据用户设置主题
      // if (this.$store.state.app.theme !== 'b') {
      //   let stylesheetPath = './dist/' + this.$store.state.app.theme + '.css';
      //   let themeLink = document.querySelector('link[name="theme"]');
      //   themeLink.setAttribute('href', stylesheetPath);
      // }
      // 显示打开的页面的列表
      this.$store.commit('setOpenedList');
      // $("html").niceScroll({
      //   cursorcolor: "#00b5ad8c",//#CC0071 光标颜色
      //   cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
      //   cursorwidth:6
      // });
    }
  };
</script>
